<template>
	<div class="system-user-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<div class="system-user-search mb15">
				<el-form :inline="true" :model="dataForm">
					<el-form-item>
						<el-select filterable clearable v-model="dataForm.region_id" placeholder="区域名称" style="width: 180px;" @change="filterChange">
							<el-option v-for="item in selectData.regionData" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-select filterable clearable v-model="dataForm.road_id" placeholder="道路名称" style="width: 180px;" @change="filterChange">
							<el-option v-for="item in selectData.roadData" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item><el-input size="default" v-model="dataForm.name" placeholder="路口名称" style="max-width: 180px"> </el-input></el-form-item>
					<el-form-item>
						<el-select clearable v-model="dataForm.type" placeholder="路口类型" style="width: 180px;" @change="filterChange">
							<el-option label="十字路口" :value="1"></el-option>
							<el-option label="T字路口" :value="2"></el-option>
							<el-option label="环形交叉口" :value="3"></el-option>
							<el-option label="立交桥" :value="4"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-select @change="filterChange"  clearable v-model="dataForm.status" placeholder="启用状态" style="width: 180px;" >
							<el-option label="启用" :value="1"></el-option>
							<el-option label="停用" :value="0"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item><el-button size="default" type="primary" class="ml10" @click="toSearch">查询</el-button></el-form-item>
					<el-form-item v-if="getAuthClick('basic-intersection-create')"><el-button size="default" type="success" class="ml10" @click="onOpenAddUser()">添加</el-button></el-form-item>
				</el-form>
			</div>
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
				<el-table-column prop="number" label="路口编号" align="center" />
				<el-table-column prop="name" label="路口名称" show-overflow-tooltip align="center"></el-table-column>
				<el-table-column  label="路口类型" show-overflow-tooltip align="center">
					<template #default="scope">
						<div>
							<div v-if="scope.row.type==1">十字路口</div>
							<div v-if="scope.row.type==2">T字路口</div>
							<div v-if="scope.row.type==3">环形交叉口</div>
							<div v-if="scope.row.type==4">立交桥</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="region.name" label="所属区域" show-overflow-tooltip align="center"></el-table-column>
				<el-table-column prop="road.name" label="所属道路" show-overflow-tooltip align="center"></el-table-column>
				<el-table-column  label="启用状态" show-overflow-tooltip align="center">
					<template #default="scope">
						<div>
							<el-link type="danger" v-if="scope.row.status==0">停用</el-link>
							<el-link type="success" v-if="scope.row.status==1">启用</el-link>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="updated_at" label="更新时间" align="center" />
				<el-table-column label="操作" width="100" align="center">
					<template #default="scope">
						<el-button v-if="showUpdataClick" size="small" text type="primary" @click="onOpenEditUser(scope.row)"
							>编辑</el-button
						>
						<el-button v-if="showDeleteClick" size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="display: flex; justify-content: flex-end;margin-right:30px">
				<el-pagination
				 style="margin-top:20px;"
				  background layout="prev, pager, next" 
				  :current-page="dataForm.page"
				  :page-size="dataForm.limit"
				  @current-change="handleCurrentChange"
				  :total="total" />
			</div>
		</el-card>
		<UserDialog ref="userDialogRef" @refresh="getTableList()" :tableData="tableData"  />
		<editDialog ref="editDialogRef" @refresh="getTableList()" :tableData="tableData"  />
	</div>
</template>

<script setup lang="ts" name="systemUser">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import {userApi} from "/@/api/system/user/index"
import {useRoleApi} from "/@/api/system/role/index"
import {useBasicApi} from "/@/api/system/menu/index"
import {useUserInfo} from "/@/stores/userInfo"

	const userInfo = useUserInfo();
	const permissions=userInfo.userInfos.permissions
	// 判断是否存在组件userInfo.userInfos.permissions
	const getAuthClick=(set:string)=>{
		let sert=permissions.findIndex((item)=>
		item==set
	)
	
	return sert>=0?true:false
	}
	 const showUpdataClick=ref(getAuthClick('basic-intersection-update'))
	 const showDeleteClick=ref(getAuthClick('basic-intersection-delete'))

const BasicApi = useBasicApi()
const RoleApi = useRoleApi()
const useApi = userApi()
// 引入组件
const UserDialog = defineAsyncComponent(() => import('/@/views/basic/intersection/dialog.vue'));
const editDialog = defineAsyncComponent(() => import('/@/views/basic/intersection/editDialog.vue'));
const tableData = ref({})
const total = ref(1)
// dx定义
const dataForm = ref({
	region_id:"",
	road_id:"",
	page:1,
	limit:10,
	include: "region;road",
	status:"",
	name:"",
	type:"",
	search:""
})
const ruleForm = ref({
	number:"",
	name:"",
	status:null,
	region_id:null,
	type:null,
	road_id:null,
})
const disabled = ref<Boolean>(false)
// 定义变量内容
const userDialogRef = ref();
const state = reactive<SysUserState>({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			pageNum: 1,
			pageSize: 10,
		},
	},
});
	const searchForm = ref({search:''})
	const selectData = reactive({
		regionData:[],
		intersectionData:[],
		roadData:[],
		locationData:[],
		monitorPoleData:[]
	})
	const getSelectData = (async ()=>{
		searchForm.value.search = `status:1`
		let res = await BasicApi.BasicTableApi(searchForm.value);
		if(res.isSuccess){
			selectData.regionData = res.returnData
		}
		let roadRes = await RoleApi.RoleTableApi(searchForm.value);
		if(roadRes.isSuccess){
			selectData.roadData = roadRes.returnData
		}
	})

	const filterChange = ()=>{
		if(dataForm.value.region_id==undefined){
			dataForm.value.region_id=''
		}
		if(dataForm.value.status==undefined){
			dataForm.value.status=''
		}
		if(dataForm.value.road_id==undefined){
			dataForm.value.road_id=''
		}
		if(dataForm.value.type==undefined){
			dataForm.value.type=''
		}
	}
	// 查询按钮
	const toSearch = (async ()=>{
			dataForm.value.search = `status:${dataForm.value.status};name:${dataForm.value.name}:like;type:${dataForm.value.type};region_id:${dataForm.value.region_id};road_id:${dataForm.value.road_id};`
			getTableList()
		
	})
		

// 获取列表数据
const getTableList = (async ()=>{
	state.tableData.loading=true
	let res = await useApi.userTableApi(dataForm.value)
	if(res.isSuccess){
		state.tableData.data = res.returnData.data
		total.value = res.returnData.total
		dataForm.value.page = res.returnData.current_page
		state.tableData.loading=false
	}
})
const editDialogRef = ref()
// 打开新增用户弹窗
const onOpenAddUser = () => {
	disabled.value = false
	tableData.value = ruleForm.value
	userDialogRef.value.openDialog();
};
// 打开修改用户弹窗
const onOpenEditUser = ( row: RowUserType) => {
	disabled.value = true
	tableData.value = row
	editDialogRef.value.openDialog();
};
// 删除用户
const onRowDel = (row:object) => {
	ElMessageBox.confirm(`此操作将永久删除此数据，是否继续?`, '提示', {
	confirmButtonText: '确认',
	cancelButtonText: '取消',
	type: 'warning',
	})
		.then(async() => {
			state.tableData.loading=true
			let res = await useApi.userDelApi({id:row.id});
			if(res.isSuccess){
				ElMessage.success('删除成功');
				state.tableData.loading=false
				getTableList()
			}else{
				ElMessage.error('删除失败')
			}
		})
		.catch(() => {});
};
const handleCurrentChange = (val:number)=>{
	dataForm.value.page = val
	getTableList()
}
// 页面加载时
onMounted(() => {
	getTableList()
	getSelectData()
});
</script>

<style scoped lang="scss">
.system-user-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;
		.el-table {
			flex: 1;
		}
	}
}
.el-input{
	height: 40px;
}
.el-button{
	height: 40px;
}
</style>
